<template>
  <div>
      <el-row :gutter="24" id='tableRow'>
          <el-col :span="12" style="height:100%">
              <div id="dynamicPieGrahpic" style="height:100%"></div>
          </el-col>
          <el-col :span="12" >
            <td>
                <el-table :data="companyRatioDetail" height="380" element-loading-text="正在努力加载中..." border fit highlight-current-row style="width: 99%">
                    <el-table-column align="center" label="企业名称" width="150">
                        <template slot-scope="scope">
                        <span>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="累计流量" width="150">
                        <template slot-scope="scope">
                        <span>{{scope.row.flowValue}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="最大压力(KPa)" width="150">
                        <template slot-scope="scope">
                        <span>{{scope.row.maxPress}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="最大温度(摄氏度)" width="150">
                        <template slot-scope="scope">
                        <span>{{scope.row.maxTemperature}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </td>
          </el-col>
      </el-row>
  </div>

</template>
    
<script>
import{
  getCompanySumDataByIndustryId
} from '@/api/bus/sensor/sensorData'
    export default{
        props:{
            industryId:String,      //查询园区的ID
            graphicTitle:String,    //图表标题
            graphicWidth:Number,    //图表宽度
            graphicHeight:Number,   //图表高度
            graphicDataType:Number,  //园区数据类型
            companyList:Array,            //园区企业列表,
            companyRatioList:Array,       //园区企业占比，用于在饼图展示各企业的占比
            companyRatioDetail:Array,     //企业详细占比信息，用于表数据展示
        },
        data(){
            return{
                searcherType:'industry',   //饼图只能用于展示园区的企业信息
                myChartPie:{},
            }
        },
        mounted() {
            this.parametertInit();
            this.drawPie();                     
        },
        methods:{
            parametertInit(){
                /*
                初始化图表的大小
                */
                document.getElementById("tableRow").style.width = this.graphicWidth + "px";
                document.getElementById("tableRow").style.height = this.graphicHeight + "px";

                //将饼图的屏宽占比占用40%
                document.getElementById("dynamicPieGrahpic").style.width = this.graphicWidth*0.4 + "px";
                document.getElementById("dynamicPieGrahpic").style.height = this.graphicHeight + "px";
            },

            drawPie(){
                this.myChartPie = this.$echarts.init(document.getElementById('dynamicPieGrahpic'));
                this.myChartPie.resize();
                this.myChartPie.setOption({
                    title : {
                        text: this.graphicTitle,
                        subtext: '',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        x : 'center',
                        y : 'bottom',
                        data: this.companyList,
                    },
                    calculable : true,
                    series : [
                        {
                            name:'面积模式',
                            type:'pie',
                            radius : [20, 110],
                            center : ['50%', '50%'],
                            roseType : 'area',
                            data:this.companyRatioList,
                            events:{
                                //为饼图添加点击事件
                                click : (e)=>{
                                    console.log("test pie click event");
                                }
                            }
                        }
                    ]
                });

                //为饼图添加click事件，可以根据企业名称跳转到对应的企业详细页面
                this.myChartPie.on('click',(params)=>{
                    // window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
                });
                console.log('22222');
                this.getData();
                
            }
            

            /** 
             * 根据园区ID到后台查询该园区的企业列表以及占比信息
            */
        //    queryCompaniesDetialByIndustryId(){
        //        //到后台获取数据，前期模拟数据
        //        var tempCompanyInfo = [
        //            {'name':'腾讯','flowValue':'20','maxFlow':'1999','mixFlow':'1000','maxPress':'2','maxTemperature':'300'},
        //            {'name':'百度','flowValue':'10','maxFlow':'999','mixFlow':'156','maxPress':'2','maxTemperature':'200'},
        //            {'name':'阿里','flowValue':'30','maxFlow':'2999','mixFlow':'1598','maxPress':'5','maxTemperature':'500'},
        //            {'name':'京东','flowValue':'15','maxFlow':'1500','mixFlow':'1100','maxPress':'2','maxTemperature':'300'},
        //            {'name':'美团','flowValue':'5','maxFlow':'999','mixFlow':'10','maxPress':'2','maxTemperature':'500'},
        //            {'name':'知乎','flowValue':'8','maxFlow':'799','mixFlow':'600','maxPress':'2','maxTemperature':'400'},
        //            {'name':'网易','flowValue':'12','maxFlow':'1299','mixFlow':'888','maxPress':'2','maxTemperature':'300'},
        //         ];


        //         this.companyList = tempCompanyInfo.map((item)=>{
        //             return item['name']
        //         });
        //         this.companyRatioList = tempCompanyInfo.map((item)=>{
        //             return {'name':item['name'],'value':item['flowValue']}
        //         });

        //         this.companyRatioDetail = tempCompanyInfo;
        //    },
        }
    }
</script>